<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="fhdb" content="true">
    <title>微信授权</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/zfbEmpower.css">
    <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
    <div class="backBox" onClick="javascript:history.back(-1);">
        <span class="glyphicon glyphicon-chevron-left"></span>
    </div>
    <div class="topTitle ">微信授权</div>
    <div class="contentBox">
        <!-- 上传图片 -->
        <div class="productDrawingBox">
            <div class="productImg">
                <div id="uploadBox">
                </div>
                <div class="uploadDIv">
                    <span>+</span><input type="file" name="file" multiple id="inputs" accept="image/*" class='fileTest'
                        multiple="multiple" />
                </div>
            </div>
        </div>
    </div>
    <div class="bottomBox">
        <p class="tip">提示：请上传微信支付图片进行授权</p>
        <button>上传凭证</button>
    </div>
</body>
<script>
    $(document).ready(function () {

        // 上传图片
        $(function () {
            var img = []; //创建一个空对象用来保存传入的图片
            var AllowImgFileSize = '101376'; //1兆
            $("#inputs").change(function () {
                img=[];
                var fil = this.files;
                for (var i = 0; i < fil.length; i++) {
                    var curr = $('#inputs')[i].files[0].size;
                    if (curr > AllowImgFileSize * 101376) { //当图片大于1兆提示
                        layer.msg("图片文件大小超过限制 请上传小于99M的文件");
                    } else {
                        reads(fil[i]);
                        img.push($('#inputs')[i].files[0]); //将传入的图片push到空对象中
                    }
                }
                console.log(img);
            });

            function reads(fil) {
                var reader = new FileReader();
                reader.readAsDataURL(fil);
                reader.onload = function () {
                    document.getElementById("uploadBox").innerHTML = "<div class='divImg' id='uploadImg'><img src='" + reader.result + "' class='imgBiMG'></div>";
                }
            }
        })
    });
</script>
</html>